<template>
  <view class="index-page">
    <mofang-panel
      ref="mofangPanelRef"
      :factorial="factorial"
      :countdown="countTimer"
      :hasTimer="isHasTimer"
      @select="mfSelect"
      @correct="onCorrect"
      @refresh="onRefresh"
      @answer="onAnswer"
      @fail="onFail"
    ></mofang-panel>

    <view class="next-btn" v-if="showNext">
      <button class="cu-btn bg-blue shadow" @click="toNext">下一关</button>
    </view>
    <view class="score-panel">
      <template v-for="item in factorialMode" :key="item.value">
        <view v-if="item.value" :class="{ 'current-factorial': factorial == item.value }">
          {{ item.name }} {{ scoreInfo[item.value] || 0 }}
        </view>
      </template>
    </view>

    <button class="cheat-btn cu-btn cuIcon" @click="onCheat">
      <text class="cuIcon-read text-bili"></text>
    </button>

    <sv-fab
      magnet="r"
      safeArea="5,5,5,5"
      :defaultAxis="defaultAxis"
      @moveStart="onMoveStart"
      @moving="onMoving"
      @moveEnd="onMoveEnd"
      @action="onAction"
    >
      <template #main>
        <view class="cus-main-btn">
          <view class="cus-main-icon cuIcon-settingsfill text-bili">️</view>
        </view>
      </template>
      <template #extend>
        <extend-row
          :extendGroup="factorialMode"
          row-direction="astringency"
          @extendAction="onExtendAction"
        >
          <template v-for="item in factorialMode" :key="item.value" #[item.id]>
            <view class="cus-extend-item" :class="item.icon"></view>
          </template>
        </extend-row>
      </template>
    </sv-fab>

    <uni-popup ref="popDialog" type="dialog">
      <uni-popup-dialog
        :type="popConfig.type"
        :cancelText="popConfig.cancelText"
        :confirmText="popConfig.confirmText"
        :title="popConfig.title"
        :content="popConfig.content"
        @confirm="popConfirm"
        @close="popClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useCommonStore } from '@/store/common'
import { sleep } from '@/utils'
import ExtendRow from '@/uni_modules/sv-fab/components/sv-fab/extend-row.vue'

const commonStore = useCommonStore()

onLoad(() => {})

const factorialMode = ref([
  { id: 'e1', name: '练气', title: '练气境 (2阶)', value: 2, icon: 'iconfont-star1' },
  { id: 'e2', name: '结丹', title: '结丹境 (4阶)', value: 4, icon: 'iconfont-star2' },
  { id: 'e3', name: '飞升', title: '飞升境 (6阶)', value: 6, icon: 'iconfont-star3' },
  { id: 'e4', name: '化神', title: '化神境 (8阶)', value: 8, icon: 'iconfont-star4' },
  {
    id: 'e5',
    name: '涅槃',
    title: '涅槃境 (20阶)',
    value: 20,
    icon: 'iconfont-dragon'
  },
  { id: 'e0', name: '刷新', title: '刷新', value: 0, icon: 'cuIcon-refresh' }
])

/**
 * 弹窗相关
 */
const popDialog = ref()
const popConfig = ref({
  type: 'success', // success | warn | info | error
  cancelText: '取消',
  confirmText: '确定',
  title: '提示',
  content: '内容'
})

function popConfirm() {
  if (popConfig.value.confirmText == '升阶') {
    factorial.value = factorial.value >= 8 ? 8 : factorial.value + 2
  }
  toNext()
}

function popClose() {
  if (popConfig.value.type == 'success') {
    // 成功
    isHasTimer.value = false
  } else {
    // 失败
    mofangPanelRef.value.again()
  }
}

/**
 * 魔方相关
 */
const mofangPanelRef = ref()
const factorial = computed({
  set(newVal) {
    commonStore.factorial = newVal
  },
  get() {
    return commonStore.factorial
  }
})
const scoreInfo = computed(() => commonStore.scoreInfo)
const showNext = ref(false)
const isHasTimer = ref(true)
const countTimer = computed(() => [factorial.value / 2, 0])

function mfSelect(e) {
  // console.log('mfSelect=>', e)
}

function onCorrect(e) {
  // console.log('onCorrect=>', e)
  if (e.correct) {
    popConfig.value = {
      type: 'success',
      cancelText: '复盘',
      confirmText: '下一关',
      title: '🎉成功🎉',
      content: '🥳恭喜你！太强了吧！🤩'
    }

    commonStore.scoreInfo[e.factorial]++

    // 只在 <=8 阶时，判断是否升阶
    if (e.factorial !== 8 && commonStore.scoreInfo[e.factorial] > 10) {
      // 升阶
      popConfig.value.confirmText = '升阶'
    }

    showNext.value = true
    isHasTimer.value = false

    popDialog.value.open()
  }
}

function onRefresh(e) {
  // console.log('onRefresh', e)
  showNext.value = false
}

function onAnswer(e) {
  // console.log('onAnswer', e)
}

function onFail(e) {
  if (e.type == 'timeup') {
    popConfig.value = {
      type: 'error',
      cancelText: '再借五百年',
      confirmText: '下一世',
      title: '⚡️渡劫失败⚡️',
      content: '😞时辰已到，魂飞魄散~👻'
    }
  } else {
    popConfig.value = {
      type: 'error',
      cancelText: '再借五百年',
      confirmText: '下一世',
      title: '⚡️渡劫失败⚡️',
      content: '😖肉身破碎，魂飞魄散~👻'
    }
  }
  popDialog.value.open()
}

function toNext() {
  isHasTimer.value = true
  popDialog.value.close()
  mofangPanelRef.value.refresh()
}

/**
 * 悬浮按钮相关
 */
const defaultAxis = computed(() => commonStore.defaultAxis)
function onAction() {
  // console.log('onAction')
}
function onMoveStart(e) {
  // console.log('onMoveStart ==>', e)
}
function onMoving(e) {
  // console.log('onMoving ==>', e)
}
function onMoveEnd(e) {
  // console.log('onMoveEnd ==>', e)
  commonStore.defaultAxis = e.position
}
function onExtendAction(e) {
  if (e.value) {
    commonStore.factorial = e.value
  } else {
    toNext()
  }
  uni.showToast({
    title: e.title,
    icon: 'none'
  })
}

/**
 * 秘籍
 */
function onCheat() {
  uni.navigateTo({
    url: '/pages/cheat/cheat'
  })
}
</script>

<style lang="scss">
.index-page {
  width: 100%;
  height: calc(100vh - var(--window-top));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 20rpx 120rpx 120rpx 120rpx;

  .next-btn {
    position: absolute;
    left: 50%;
    bottom: 24rpx;
    transform: translateX(-50%);
    z-index: 999;
  }

  .cheat-btn {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    padding: 0 10px;
    font-size: 10px;
    width: 24px;
    height: 24px;
  }

  .score-panel {
    position: absolute;
    bottom: 40rpx;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    font-size: 12px;
  }

  .current-factorial {
    color: blue;
  }

  .cus-main-btn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #66ccff22;
    backdrop-filter: blur(10px) brightness(96%);

    .cus-main-icon {
      font-size: 36px;
    }
  }

  .cus-extend-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #ff5500;
    background-color: #ffee0066;
    backdrop-filter: blur(10px) brightness(96%);
  }
}
</style>
